import React             from 'react';
import Product           from 'service/product-service.jsx';
import MUtil             from 'util/mm.jsx';
const _product = new Product();
const _mm   = new MUtil();
import './category-selector.scss';

class CategorySelector extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			firstCategoryList  : [],
			firstCategoryId    : 0,
			secondCategoryList : [],
			secondCategoryId   : 0
		}
	}
	componentDidMount(){
		this.loadFirstCategory();
	}
	componentWillReceiveProps(nextProps){
		let categoryIdChange       = this.props.categoryId !== nextProps.categoryId,
		    parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
		//两个选择框都没变化
		if(!categoryIdChange && !parentCategoryIdChange){
              return ;
		}
		//一级选择框发生了变化
		if(nextProps.parentCategoryId === 0){
			this.setState({
				firstCategoryId  : nextProps.categoryId,
				secondCategoryId : 0
			});
		}
		else{
			this.setState({
				firstCategoryId  : nextProps.parentCategoryId,
				secondCategoryId : nextProps.categoryId
			},() => {
				parentCategoryIdChange && this.loadSecondCategory();
			});
		}
	}
	//加载一级分类
	loadFirstCategory(){
		_product.getCategoryList().then(res => {
			this.setState({
				firstCategoryList : res
			});
		},errMsg => {
			_mm.errorTips(errMsg);
		});
			
	}
	//加载二级分类
	loadSecondCategory(){
      _product.getCategoryList(this.state.firstCategoryId).then(res => {
			this.setState({
				secondCategoryList : res
			});
		},errMsg => {
			_mm.errorTips(errMsg);
		});
	}
	//选择一级品类
	onFirstCategoryChange(e){
		if(this.props.readOnly){
			return;//在select框中设置为只读还需要return掉
		}
		let newValue = e.target.value;
		this.setState({
			firstCategoryId    : newValue,
			secondCategoryId   : 0,
			secondCategoryList : []
		},() => {
			//更新二级品类setState是异步的
			this.loadSecondCategory();
			this.onPropsCategoryChange();//传给父组件选中的结果
		});
	}
	//传给父组件选中的结果
	onPropsCategoryChange(){
       //先判断父组件给没给这个方法
       let categoryChangable = typeof this.props.onCategoryChange === 'function';
       //如果存在二级品类 
       if(this.state.secondCategoryId){
       	//如果有这个方法再去调用&&的作用
          categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId);
       }else{
          categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId,0);
       }
	}
	//选择二级品类
	onSecondCategoryChange(e){
		if(this.props.readOnly){
			return;
		}
       let newValue = e.target.value || 0;
       this.setState({
       	secondCategoryId : newValue
       },() => {
       	this.onPropsCategoryChange();
       });
	}

     render(){
        return (
             <div className="col-md-10">
                 <select  value={this.state.firstCategoryId}className="form-control cate-select" onChange={(e) =>{this.onFirstCategoryChange(e)}}
                 readOnly={this.props.readOnly}>
                     <option value="">请选择一级分类</option>
                     {
                     	this.state.firstCategoryList.map((category,index) => 
                             <option value={category.id} key={index}>{category.name}</option>
                       )
                     }
                 </select>
                 { this.state.secondCategoryList ? 
                 (<select value={this.state.secondCategoryId} className="form-control cate-select" onChange={(e) =>{this.onSecondCategoryChange(e)}}
                 	readOnly={this.props.readOnly}>
                    <option value="">请选择二级分类</option>
                    {
                     this.state.secondCategoryList.map((category,index) => 
                            <option value={category.id} key={index}>{category.name}</option>
                      )
                    }
                 </select>) : null 
                 }
             </div>
         );
     }
}


export default CategorySelector;
